﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>songs</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
    <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
    </noscript>
</head>

<style>
    .search-input {
        border-radius: 50px;
        height: 50px;
    }
    
    .search-submit {
        background-image: url(images/search-icon.png);
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 250px;
    }
</style>

<body>
    <div class="container demo-1">


        <nav class="codrops-demos" style="position: absolute; left: 300px; top: 5px;">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <p style="font-size: 20px;">&nbsp;&nbsp;&nbsp;Please choose one type to search</p>
            <a style="font-size: 30px;" href="../ranking_of_singers/index.html">singers</a>
            <a style="font-size: 30px;" href="../ranking_of_albums/index.html">albums</a>
            <a style="font-size: 30px;" class="current-demo" href="#">songs</a>
            <form target="_self" style="position: absolute; left: 800px; top: 60px; font-size: 20px;" method="GET" action="../search/search_song.php">
                <input style="font-size: 20px;" type="text" class="search-input" placeholder="          Type to search" name="song" />
                <input type="submit" class="search-submit" value=" ">
            </form>
            <!-- <p style="position: absolute; left: 1350px; top: 110px;font-size: 20px;">歌曲前五榜单</p> -->
        </nav>

        <div id="slider" class="sl-slider-wrapper">

            <div class="sl-slider">

                <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                    <div class="sl-slide-inner">
                        <!-- <form target="_self" style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_song.php">
              <input type="text" class="search-input" placeholder="    Type to search" name="song"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a target="_self" href="php/onesong.php ? id=411214279">
                            <div class="deco" style="background-image: url('http://p2.music.126.net/Wcs2dbukFx3TUWkRuxVCpw==/3431575794705764.jpg?param=177y177'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>雅俗共赏</h2>
                        <blockquote>
                            <p>
                                或许，听到这首歌，你觉得没以前的歌那么入耳了，能够理解，但是他不想做重复的音乐，即使他可以写出像有何不可那样的歌，但已无当时的心境。</p>
                            <cite style="font-size: 15px;">total comment : 2431975</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_song.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="song"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/onesong.php ? id=186016">
                            <div class="deco" style="background-image: url('http://p1.music.126.net/yjVbsgfNeF2h7fIvnxuZDQ==/18894007811887644.jpg?param=130y130'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>晴天</h2>
                        <blockquote>
                            <p>
                                那时候总喜欢在操场上偷偷看他打篮球</br>广播里总是放这首歌</br>每天一到吃饭的时候我就坐在操场的站台上看他</br>春天的风暖暖的</br>还有夕阳西下的晚霞</br>那时候我们有大把的青春可以浪掷</br>不知道成长是什么</br>然而所有的时光都是被辜负被浪费后</br>才能从记忆里将某一段拎出</br>拍拍上面沉积的灰尘</br>感叹它才是最好的时光
                            </p>
                            <cite style="font-size: 15px;">total comment : 2007169</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_song.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="song"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/onesong.php ? id=496370620">
                            <div class="deco" style="background-image: url('http://p2.music.126.net/W-4b64hCb_s8OAGROQXgig==/109951162995598984.jpg?param=130y130'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>断线</h2>
                        <blockquote>
                            <p>
                                我们的关系只存在于对方的对话框里</br>
                                手机一锁 电源一关 关系就断</br>
                                原来我们从没有让彼此的心更靠近一步</p>
                            <cite style="font-size: 15px;">total comment : 1204066</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_song.php">
              <input type="text" class="search-input" placeholder="    Type to search" name="song"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/onesong.php ? id=1407358755">
                            <div class="deco" style="background-image: url('http://p2.music.126.net/3-y4J1CayZI0k2NkNkTmDw==/109951164525748216.jpg?param=130y130'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>好想爱这个世界啊</h2>
                        <blockquote>
                            <p>
                                曾想过离开</br>
                                在无数个漆黑的白天</br>
                                直到你为我拨开雾霾</br>
                                我想去看山河湖海</br>
                                因为你说</br>
                                毕竟我们只有一生这么长</br>
                                要用力给人间留下些印象
                            </p>
                            <cite style="font-size: 15px;">total comment : 973049</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_song.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="song"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/onesong.php ? id=531051217">
                            <div class="deco" style="background-image: url('http://p2.music.126.net/A8qicH14toObbLpPMiKmBw==/109951163110962030.jpg?param=130y130'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>等你下课 (with 杨瑞代)</h2>
                        <blockquote>
                            <p>
                                等春风吹柳绿</br>
                                等晚霞染天际</br>
                                等梅子黄时雨</br>
                                等你下课等相遇</p>
                            <cite style="font-size: 15px;">total comment : 965691</cite>
                        </blockquote>
                    </div>
                </div>
            </div>
            <!-- /sl-slider -->

            <nav id="nav-arrows" class="nav-arrows">
                <span class="nav-arrow-prev">Previous</span>
                <span class="nav-arrow-next">Next</span>
            </nav>

            <nav id="nav-dots" class="nav-dots">
                <span class="nav-dot-current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </nav>

        </div>
        <!-- /slider-wrapper -->

    </div>

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
    <script type="text/javascript" src="js/jquery.slitslider.js"></script>
    <script type="text/javascript">
        $(function() {

            var Page = (function() {

                var $navArrows = $('#nav-arrows'),
                    $nav = $('#nav-dots > span'),
                    slitslider = $('#slider').slitslider({
                        onBeforeChange: function(slide, pos) {

                            $nav.removeClass('nav-dot-current');
                            $nav.eq(pos).addClass('nav-dot-current');

                        }
                    }),

                    init = function() {

                        initEvents();

                    },
                    initEvents = function() {

                        // add navigation events
                        $navArrows.children(':last').on('click', function() {

                            slitslider.next();
                            return false;

                        });

                        $navArrows.children(':first').on('click', function() {

                            slitslider.previous();
                            return false;

                        });

                        $nav.each(function(i) {

                            $(this).on('click', function(event) {

                                var $dot = $(this);

                                if (!slitslider.isActive()) {

                                    $nav.removeClass('nav-dot-current');
                                    $dot.addClass('nav-dot-current');

                                }

                                slitslider.jump(i + 1);
                                return false;

                            });

                        });

                    };

                return {
                    init: init
                };

            })();

            Page.init();

            /**
             * Notes: 
             * 
             * example how to add items:
             */

            /*
 
var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
 
// call the plugin's add method
ss.add($items);
 
*/

        });
    </script>


</body>

</html>